const jq_leftNav1 = $("#nav1");
const jq_leftNav2 = $("#nav2");
const jq_leftNav3 = $("#nav3");
const jq_leftNav4 = $("#nav4");
const jq_leftNav5 = $("#nav5");

const jq_mainText1 = $("#mainText1");
const jq_mainText2 = $("#mainText2");
const jq_mainText3 = $("#mainText3");
const jq_mainText4 = $("#mainText4");
const jq_mainText5 = $("#mainText5");

const jq_mainTexts = [
  jq_mainText1,
  jq_mainText2,
  jq_mainText3,
  jq_mainText4,
  jq_mainText5,
];

const jq_navImg1 = $("#navImg1");
const jq_navImg2 = $("#navImg2");
const jq_navImg3 = $("#navImg3");
const jq_navImg4 = $("#navImg4");
const jq_navImg5 = $("#navImg5");

const jq_navImgs = [jq_navImg1, jq_navImg2, jq_navImg3, jq_navImg4, jq_navImg5];

const navList = [
  {
    default: "../public/images/nav1.png",
    active: "../public/images/n1.png",
    eleName: "navImg1",
  },
  {
    default: "../public/images/nav2.png",
    active: "../public/images/n2.png",
    eleName: "navImg2",
  },
  {
    default: "../public/images/nav3.png",
    active: "../public/images/n3.png",
    eleName: "navImg3",
  },
  {
    default: "../public/images/nav4.png",
    active: "../public/images/n4.png",
    eleName: "navImg4",
  },
  {
    default: "../public/images/nav6.png",
    active: "../public/images/n5.png",
    eleName: "navImg5",
  },
];

const right_content_1 = $("#right-content-1");
const right_content_2 = $("#right-content-2");
const right_content_3 = $("#right-content-3");
const right_content_4 = $("#right-content-4");
const right_content_5 = $("#right-content-5");
const right_contents = [
  right_content_1,
  right_content_2,
  right_content_3,
  right_content_4,
  right_content_5,
];
const default_block = right_content_1; // 设置默认
const jq_code = $("#code");
const jq_content = $("#content"); // 协议隐私弹窗按钮
const jq_dropdown = $("#dropdown"); // 导航下拉
const jq_quit = $("#quit"); // 导航下拉

const iframeChatListSrc = "./rightBlock2/main.html";
const iframeChatListSrc2 = "./rightBlock3/main.html";
const iframeChatItemSrc = "./chatBlock/main.html";

jq_dropdown.click(() => {
  $("#dropdown-toggle").dropdown("show");
});

$(document).on("click", function (event) {
  // 检查点击的是否是下拉菜单或者按钮
  if (!$(event.target).closest(".dropdown").length) {
    $(".dropdown-menu").removeClass("show"); // 手动关闭菜单
  }
});

jq_quit.click(() => {
  window.location = "../LoginPage/index.html";
});

jq_code.click(() => {
  $("#codeModal").modal();
});

jq_content.click(() => {
  $("#contentModal").modal();
});

jq_leftNav1.click((e) => {
  showContent(0, right_content_1, jq_mainText1);
});

jq_leftNav2.click((e) => {
  showContent(1, right_content_2, jq_mainText2);
  const iframe = document.getElementById("rightBlock2"); // 替换为 iframe 的实际 ID 或选择器
  iframe.src = iframeChatListSrc;
  setTimeout(() => {
    talkItemClick("rightBlock2");
  }, 50);
});

jq_leftNav3.click((e) => {
  showContent(2, right_content_3);
  const iframe = document.getElementById("rightBlock3"); // 替换为 iframe 的实际 ID 或选择器
  iframe.src = iframeChatListSrc2;
  setTimeout(() => {
    talkItemClick("rightBlock3");
  }, 50);
  // const iframe = document.getElementById("rightBlock2"); // 替换为 iframe 的实际 ID 或选择器
  // iframe.src = iframeChatListSrc;
  // setTimeout(() => {
  //   talkItemClick();
  // }, 50);
});

jq_leftNav4.click((e) => {
  showContent(3, right_content_4, jq_mainText4);
});

jq_leftNav5.click((e) => {
  showContent(4, right_content_5, jq_mainText5);
});

const hideAll = () => {
  right_contents.forEach((ele) => {
    ele.hide();
  });
  jq_mainTexts.forEach((ele) => {
    ele.css({
      color: "#000",
    });
  });
  jq_navImgs.forEach((ele, index) => {
    ele[0].src = navList[index].default;
  });
};

const showContent = (index, content, text) => {
  hideAll();
  content.show();
  // text[0].style.color = "#1D87FB";
  jq_navImgs[index][0].src = navList[index].active;
};

// 对话框显示跳转逻辑
const talkItemClick = (iframeId) => {
  console.log("对话跳转");
  // 获取 iframe 的内容窗口
  const iframe = document.getElementById(iframeId); // 替换为 iframe 的实际 ID 或选择器
  const iframeDocument =
    iframe.contentDocument || iframe.contentWindow.document;
  // 在 iframe 内选择元素
  const jq_talkItem = $(iframeDocument).find(`.rightBlock2 .list`).children();

  // 为每个子项绑定点击事件
  jq_talkItem.each((index, element) => {
    $(element).click((e) => {
      console.log("点击的元素索引：", index);
      console.log("事件对象：", e);
      console.log("当前元素：", element);
      iframe.src = iframeChatItemSrc;
    });
  });
};

const initPage = () => {
  showContent(0, default_block, jq_mainText1);
};

initPage();
